import React, { Component } from 'react';
import { StyleSheet, View,TextInput,Image,Dimensions,Button,Text } from 'react-native';
import AppStyle from '../styles/index';
import {txt,view} from '../comm/Size';
const { width, height } = Dimensions.get("window");
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import {Tool} from "../comm/util";

import { connect } from 'react-redux';

export default class LoginPage extends Component {
    static navigationOptions = {
        header: null
    }

    constructor(props) {
        super();
        this.state = {};
    }

    _scrollToInput = (reactNode)=> {
        this.refs.scroll.scrollToFocusedInput(reactNode)
    }

    login = ()=> {
        this.props.navigation.navigate('HomePage')
    }
    reg = ()=> {
        this.props.navigation.navigate('RegPage')
    }

    render() {
        return (
            <KeyboardAwareScrollView ref='scroll'>
                <View style={styles.container}>
                    <View style={styles.logoContainer}>
                        <Image style={styles.logo} resizeMode="center"
                               source={require('../assets/new_logo.png')}/>
                    </View>
                    <View style={styles.formContainer}>
                        <TextInput placeholder="请输入账号或者邮箱..."/>
                        <TextInput placeholder="请输入密码..."/>
                        <View>
                            <Text style={styles.txt}>忘记密码?</Text>
                        </View>
                        <View style={styles.btnWrap}>
                            <View>
                                <Text  onPress={this.reg}  style={styles.btn}>注册</Text>
                            </View>
                            <View style={styles.btnStyle}>
                                <Button
                                    onPress={this.login}
                                    title="登录"
                                    color={AppStyle.mainColor}
                                />
                            </View>
                        </View>
                    </View>
                </View >
            </KeyboardAwareScrollView>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        height: height,
        display: "flex"
    },
    logoContainer: {
        height:view(824.412),
        backgroundColor: AppStyle.mainColor,
        flexShrink: 0,
        justifyContent: "center",
        alignItems: "center"
    },
    logo: {
        width: view(464),
        height: view(262)
    },
    formContainer: {
        flexGrow:1,
        paddingHorizontal: view(50),
        paddingVertical: view(20),
    },
    txt: {
        textAlign: "right",
        color: AppStyle.linkColor,
        paddingRight: 10,
        textDecorationLine: "underline",
        fontSize: 10
    },
    btnStyle:{
        width:view(315),
    },
    btnWrap: {
        flexDirection: "row",
        justifyContent: "space-between",
        marginTop: view(20)
    }
    ,
    btn: {
        borderWidth: 1,
        borderColor: AppStyle.secondColor,
        paddingTop: view(14),
        paddingBottom: view(14),
        width:view(315),
        color: AppStyle.secondColor,
        textAlign: "center"
    }
})